<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            function setXMLHttpRequest()
            {
             xhr = null;
                if ( window.XMLHttpRequest ) {
                var xhr = new XMLHttpRequest();
                }
                // MSIE 6 con ActiveX
                else if ( window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                return xhr;
            }
            function AggiungiProdotto(prodotto)
            {
                //alert(prodotto+' '+prezzo);
                xhr = setXMLHttpRequest();
                xhr.open("GET",'GetProductInfo?&product='+prodotto,true);
                xhr.onreadystatechange = function()
                {
                if (xhr.readyState==4 && xhr.status==200)
                  {
                    var risp = xhr.responseText;
                    
                    var table = document.getElementById("CarrelloTable");
                    var righe = table.getElementsByTagName('tr');
                     var found = -1 ;
                     for(var j=0; j<righe.length; j++){
                         var colonnaNome = righe[j].getElementsByTagName('td')[2];
                          if(colonnaNome.innerHTML==prodotto){
                               found=j;
                               break;
                          }
                     }
                    if(found > -1) {
                        var colonnaQuantita = righe[found].getElementsByTagName('td')[0].innerHTML;
                        //alert(colonnaQuantita);
                        var totValue = parseFloat(colonnaQuantita);
                        totValue = totValue+1;
                       // alert(totValue);
                        righe[found].getElementsByTagName('td')[0].innerHTML= totValue;
                    }
                    else {
                        // Create an empty <tr> element and add it to the 1st position of the table:

                        var row = table.insertRow(0);

                        // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);
                        var cell4 = row.insertCell(3);
                        // Add some text to the new cells:
                        cell1.innerHTML = 1;
                        cell2.innerHTML = 'x';
                        cell3.innerHTML = prodotto;
                        cell4.innerHTML = risp;
                    }
                    var totale = document.getElementById('mioTOT').innerHTML;
                    var totValue = parseFloat(totale);
                    var rispvalue = parseFloat(risp);
                    totValue = totValue+rispvalue;
                   // alert(totValue);
                    document.getElementById('mioTOT').innerHTML= totValue.toFixed(2);
                 
                  }
                };        
                xhr.send(null);
            }
           
        </script>
    </head>
    <body>
        <div>
            <h1> Prodotti Disponibili</h1>
            <table>
                <tr>
                    <th>NOME PRODOTTO</th>
                    <th>PREZZO</th>
                    <th></th>
                </tr>
                <tr>
                    <td> Latte </td>
                    <td> 0,60€</td>
                    <td><button onclick="AggiungiProdotto('Latte');">Acquista</button></td>                    
                </tr>
                <tr>
                    <td> Cioccolata </td>
                    <td> 0,50€</td>
                    <td><button onclick="AggiungiProdotto('Cioccolata');">Acquista</button></td>                    
                </tr>
                <tr>
                    <td> Patatine</td>
                    <td> 1,20€</td>
                    <td><button onclick="AggiungiProdotto('Patatine');">Acquista</button></td>                    
                </tr>
                <tr>
                    <td> Snack </td>
                    <td> 2,00€</td>
                    <td><button onclick="AggiungiProdotto('Snack');">Acquista</button></td>                    
                </tr>
                <tr>
                    <td> Acqua </td>
                    <td> 1,00€</td>
                    <td><button onclick="AggiungiProdotto('Acqua');">Acquista</button></td>                    
                </tr>
            </table>
        </div>
        <div>
                <table>
                    <tr>
                        <td><h1>CARRELLO</h1></td>
                        <td><h1> &nbsp&nbsp&nbsp TOT=</td>
                        <td><h1 id="mioTOT">0.0</h1></td>
                        <td><h1>€</h1></td>
                    </tr>
                </table>
            <table id="CarrelloTable" ></table>
        </div>
    </body>
</html>
